<!-- <template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'SetupDemo',
    setup(){
      let name = '张三'
      let age = 18
      
      // 方法
      function changeName() {
        name = 'zhang-san'
      }
      function changeAge() {
        age += 1
      }

      // 将数据、方法交出去，模板中才可以使用
      return { name, age, changeName, changeAge }
    }
  }
</script> -->
<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang="ts" setup name="SetupDemo">
  let name = '张三'
  let age = 18
  function changeName() {
    name = 'zhang-san'
  }
  function changeAge() {
    age += 1
  }
</script>